<template>
  <div>
    <el-row :gutter="20">
      <el-form 
        label-width="120px"
        :model="terminalForm"
        :rules="terminalDialogRules"
        ref="terminalForm"
        >
        <el-col :span="12">
          <el-form-item label="终端类型:">
            <el-input :value="rptShowName" readonly size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="terminalForm.hasOwnProperty('rpsNo')">
          <el-form-item label="终端供应商:" prop="rpsNo">
            <el-select
              size="small"
              filterable
              v-model="terminalForm.rpsNo"
              placeholder="请选择供应商"
              @change="rpsNoChange"
            >
              <el-option
                v-for="item in rpsNoList"
                :key="item.rpsNo"
                :label="item.rpsName"
                :value="item.rpsNo"
              >
              <span style="float: left">{{ item.rpsName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpsNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="terminalForm.hasOwnProperty('rpmNo')">
          <el-form-item label="终端型号:" prop="rpmNo">
            <el-select
              size="small"
              filterable
              v-model="terminalForm.rpmNo"
              placeholder="请选择型号"
              @change="rpmNoChange"
            >
              <el-option
                v-for="item in rpmNoList"
                :key="item.rpmNo"
                :label="item.rpmName"
                :value="item.rpmNo"
              >
              <span style="float: left">{{ item.rpmName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpmNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="terminalForm.hasOwnProperty('storeNo')">
          <el-form-item label="门店:" prop="storeNo">
            <el-select
              size="small"
              filterable
              v-model="terminalForm.storeNo"
              placeholder="请选择门店"
              @change="storeNoChange"
            >
              <el-option
                v-for="item in storeNoList"
                :key="item.rpsNo"
                :label="item.rpsName"
                :value="item.rpsNo"
              >
              <span style="float: left">{{ item.rpsName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpsNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="terminalForm.hasOwnProperty('rpstNo')">
          <el-form-item label="收银员:" prop="rpstNo">
            <el-select
              size="small"
              filterable
              v-model="terminalForm.rpstNo"
              placeholder="请选择收银员"
              @change="rpstNoChange"
            >
              <el-option
                v-for="item in rpstNoList"
                :key="item.rpstNo"
                :label="item.rpstName"
                :value="item.rpstNo"
              >
              <span style="float: left">{{ item.rpstName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpstNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="terminalForm.hasOwnProperty('rsSn')">
          <el-form-item label="SN编号:" prop="rsSn">
            <el-input v-model="terminalForm.rsSn" :disabled="terminalDialog.type=='edit'?true:false" placeholder="请输入终端编号" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="terminalForm.hasOwnProperty('rtName')">
          <el-form-item label="终端简称:" prop="rtName">
            <el-input v-model="terminalForm.rtName" placeholder="请输入终端简称" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { getDictionary } from "@/api/system/dict";
import { getModelList, getrpstNo, getstoreNo, getRpsNo } from "@/api/rb-service/terminal/terminal";

export default {
  props: {
    terminalDialog: {
      type: Object
    },
    // 商户编号
    rpiNo: {
      type: String,
      default: ""
    },
    // 终端类型编号
    rptNo: {
      type: String,
      default: ""
    },
    // 终端类型展示名称
    rptShowName: {
      type: String,
      default: ""
    },
    // 终端表单
    terminalForm: {
      type: Object,
      default: () => {
        return {
          rpiNo: "",
          rpsNo: "",
          rpmNo: "",
          storeNo: "",
          rpstNo: "",
          rsSn: "",
          rtName: "",
        }
      }
    }
  },
  data() {
    return {
      terminalDialogRules:{
          rptNo:[
            { required: true, message: '类型不能为空', trigger: 'blur' }
          ],
          rpsNo:[
            { required: true, message: '供应商不能为空', trigger: 'blur' }
          ],
          rpmNo:[
            { required: true, message: '型号不能为空', trigger: 'blur' }
          ],
          rpiNo:[
            { required: true, message: '商户不能为空', trigger: 'blur' }
          ],
          rsSn:[
            { required: true, message: 'SN编号不能为空', trigger: ['blur','change'] },
            {
              pattern:/^[A-Za-z0-9]+$/,message:'SN编号由数字字母组成', trigger: ['blur','change'] 
            }
          ],
          rtName: [
            { required: true, message: '终端简称不能为空', trigger: 'blur' }
          ]
      },
      storeType:[],// 门店或收银员
      rpmNoList:[],// 型号
      storeNoList:[],// 门店
      rpstNoList:[],// 收银员
    };
  },
  computed() {},
  watch: {},
  created(){
     this.doGetDicts();
     this.rpsNoListChange();//供应商
     this.rpsNoChange();//型号
     this.rpiNoListChange();//门店
  },
  methods: {
    // 字典
     doGetDicts() {
      // 门店或收银员
      getDictionary({ code: "belong_type" }).then((res) => {
        this.storeType = res.data.data;
      });
    },
    // 表单清空
    initEmpty() {
      this.$refs['terminalForm'].resetFields();
      this.$refs['terminalForm'].terminalForm = {};
    },
    /* 选择类型---获取供应商列表 */
    rpsNoListChange(){
      this.terminalForm.rpsNo="";
      this.rpsNoList=[];
      getRpsNo(-1,-1,{rptNo: this.rptNo}).then((res)=>{
        this.rpsNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    /* 选择供应商---获取型号列表 */
    rpsNoChange(value){
      this.terminalForm.rpmNo="";
      this.rpmNoList=[];
      let param={
        rptNo: this.rptNo
      }
      if(value){
        param.rpsNo = value
      }
      getModelList(-1,-1,param).then((res)=>{
        this.rpmNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 选择型号
    rpmNoChange(value){
      this.terminalForm.rpmNo = value;
      this.$forceUpdate()
    },
    //选择商户---获取门店
    rpiNoListChange(){
      this.terminalForm.storeNo="";//门店
      this.storeNoList=[];//门店
      this.terminalForm.rpstNo="";//收银员
      this.rpstNoList=[];//收银员
      getstoreNo(-1,-1,{rpiNo:this.rpiNo}).then((res)=>{
        this.storeNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 门店/收银员
    storeTypeChange(){
      this.terminalForm.storeNo="";//门店
      this.terminalForm.rpstNo="";//收银员
      this.rpstNoList=[];//收银员list
    },
    // 选择门店
    storeNoChange(rpsNo){
      this.rpstNoList=[];//收银员list
      getrpstNo(-1,-1,{rpsNo}).then((res)=>{
        this.rpstNoList = res.data.data.records;
      })
      this.terminalForm.rpstNo="";//收银员
      this.$forceUpdate()
    },
    // 选择收银员 change 回调
    rpstNoChange(){
      this.$forceUpdate()
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-select {
  width:100%
}
/deep/ .el-input.is-disabled .el-input__inner{
  background-color: #fff;
}

/deep/ .el-form-item__content .el-input-group {
  vertical-align: baseline;
}
</style>
